<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>遥测数据实时监控</title>
</head>
<body style="height: 700px; margin: 0">
<div style="height: 30px;">
    <div style="float: left; margin-left: 10px;margin-top: 5px;">
        问题反馈：<input id="text1" type="text" style="width: 300px;" value="遥测数据[123]有问题"/>
        <button onclick="send()">发送</button>
    </div>
    <div style="float: right; margin-right: 10px;margin-top: 5px;color: red;">
        <div id="message"></div>
    </div>
</div>
<div id="container" style="height: calc(100% - 30px); "></div>

<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript">

    Date.prototype.Format = function (fmt) { // author: meizz
        var o = {
            "M+": this.getMonth() + 1, // 月份
            "d+": this.getDate(), // 日
            "h+": this.getHours(), // 小时
            "m+": this.getMinutes(), // 分
            "s+": this.getSeconds(), // 秒
            "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
            "S": this.getMilliseconds() // 毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }


    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, 'dark', {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var data = [];

    //初始化图表数据和横轴范围,数据默认为0
    now = new Date()-1000*1000;
    for (var i = 0; i < 1000; i++) {
        data.push(initData());
    }

    function initData() {
        now = new Date(+now + 1000);
        var ds;
        if (now.getSeconds()< 10) {
            ds = "0" + now.getSeconds().toString();
        } else {
            ds = now.getSeconds().toString();
        }
        var nwoStr = now.Format("yyyy-MM-dd hh:mm:ss");
        return {
            name: now.toString(),
            value: [
                nwoStr,
                parseInt(Math.random() * 2000)
            ]
        };
    }

    //初始化图表
    var option;
    option = {
        title: {
            text: '遥测数据实时监控'
        },
        tooltip: {
            trigger: 'axis',


        },
        toolbox: {
            right: 10,
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            max: 2000,
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        visualMap: {
            top: 50,
            right: 10,
            pieces: [
                {
                    gt: 0,
                    lte: 500,
                    color: '#93CE07'
                },
                {
                    gt: 500,
                    lte: 750,
                    color: '#FBDB0F'
                },
                {
                    gt: 750,
                    lte: 1000,
                    color: '#FC7D02'
                },
                {
                    gt: 1000,
                    lte: 1500,
                    color: '#FD0100'
                },
                {
                    gt: 1500,
                    lte: 1800,
                    color: '#AA069F'
                },
                {
                    gt: 1800,
                    color: '#AC3B2A'
                }
            ],
            outOfRange: {
                color: '#999'
            }
        },
        series: {
            name: '遥测数值',
            type: 'line',
            data: data.map(function (item) {
                return item[1];
            }),
            markLine: {
                silent: true,
                lineStyle: {
                    color: '#333'
                },
                data: [

                    {
                        yAxis: 500
                    },
                    {
                        yAxis: 750
                    },
                    {
                        yAxis: 1000
                    },
                    {
                        yAxis: 1500
                    },
                    {
                        yAxis: 1800
                    }
                ]
            }
        }
    };


    var websocket = null;
    var alarmWebsocket = null;

    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:9998/websocket");
        alarmWebsocket = new WebSocket("ws://localhost:9998/alarmWebsocket");
    }
    else {
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function (event) {
        setMessageInnerHTML("open");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("close");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        websocket.close();
        alarmWebsocket.close();
    }

    //接收到消息的回调方法
    alarmWebsocket.onmessage = function (event) {
        var msg = "【遥测数据有问题】"+event.data+"，请及时确认！";
        document.getElementById('message').innerHTML = msg;
    }

    //将结果显示在echarts图表
    function setMessageInnerHTML(value) {
        data.shift();
        data.push(getChartData(value));
        myChart.setOption({
            series: [
                {
                    data: data
                }
            ]
        });
    }




    function getChartData(value) {
        now = new Date();
        var ds;
        if (now.getSeconds()< 10) {
            ds = "0" + now.getSeconds().toString();
        } else {
            ds = now.getSeconds().toString();
        }
        var nwoStr = now.Format("yyyy-MM-dd hh:mm:ss");
        return {
            name: now.toString(),
            value: [
                nwoStr,
                value
            ]
        };
    }


    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);

    function send(){
        var message = document.getElementById('text1').value;
        alarmWebsocket.send(message);
    }
</script>
</body>
</html>
